<script>
import { getShowImage } from "@/utils"

export default {
  name: "rankItem",
  methods: { getShowImage },
  props: {
    item: Object,
    rank: Number,
    primary: Boolean,
  },
}
</script>

<template>
  <view class="rank-item column" :class="{ primary: primary }">
    <!--		你的排名提示-->
    <view class="my-rank-tips" v-if="primary">
      <view class="content">你的排名</view>
      <view class="triangle"></view>
    </view>
    <!--					排名-->
    <view class="column-item-1 column-item">
      <view class="rank-num" :class="'rank-num-' + rank">{{ rank }}</view>
    </view>
    <!--					用户信息-->
    <view class="userInfo column-item-2 column-item">
      <!--						头像-->
      <view class="avatar-container">
        <image class="avatar" :src="getShowImage(item.userIcon)" v-if="item.userIcon"></image>
        <text class="avatar text">{{ item.userName[0] }}</text>
      </view>
      <!--						昵称-->
      <view class="nick-name">{{ item.userName }}</view>
    </view>
    <!--					打卡天数-->
    <view class="duration column-item-3 column-item">
      <text class="number">{{ item.totalCheckInDays }}</text>
      <text>天</text>
    </view>
    <!--					累计学习时长-->
    <view class="duration column-item-4 column-item">
      <!--							时-->
      <template v-if="item.duration.h > 0">
        <text class="number">{{ item.duration.h }}</text>
        <text>h</text>
      </template>

      <!--						分-->
      <template v-if="item.duration.m > 0">
        <text class="number">{{ item.duration.m }}</text>
        <text>min</text>
      </template>

      <!--						秒-->
      <template v-if="item.duration.h === 0">
        <text class="number">{{ item.duration.s }}</text>
        <text>s</text>
      </template>
    </view>
  </view>
</template>

<style scoped lang="scss">
@import "../common";

.rank-item {
  position: relative;
  &.primary {
    margin-top: 40rpx;
		margin-bottom: 20rpx;
    background: #caebd8;
  }
  > .my-rank-tips {
    position: absolute;
    top: -40rpx;
    left: 0;
    display: flex;
    > .content {
      height: 40rpx;
      line-height: 40rpx;
			padding-left: 20rpx;
      font-size: 28rpx;
      background: #caebd8;
      color: #a75b07;
    }
    > .triangle {
      width: 0;
      height: 0;
      border-right: 40rpx solid transparent;
      border-bottom: 40rpx solid #caebd8;
    }
  }

  .rank-num {
    border: 6rpx solid #bbbbbb;
    font-size: 30rpx;
    border-radius: 6rpx;
    width: 60rpx;
    height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #bbbbbb;
    font-weight: bold;
    &.rank-num-1 {
      color: #a70707;
      border-color: #a70707;
    }
    &.rank-num-2 {
      color: #0774a7;
      border-color: #0774a7;
    }
    &.rank-num-3 {
      color: #a75b07;
      border-color: #a75b07;
    }
  }
  .userInfo {
    .avatar-container {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      overflow: hidden;
      .avatar {
        width: 100%;
        height: 100%;
      }
      .text {
        font-size: 30rpx;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #3c3c3c;
      }
    }
    .nick-name {
      margin-left: 16rpx;
      width: 0;
      flex: 1;
      font-size: 30rpx;
      //文本溢出部分自动加省略号
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .duration {
    font-size: 30rpx;
    .number {
      color: #a75b07;
    }
  }
}
</style>
